﻿<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<div id="fancy_search2" style="">
<%string ControllerName = Html.ViewContext.Controller.ValueProvider.GetValue("controller").RawValue.ToString(); %>
<form action="<%=Url.Content("~/")+ ViewData["now_controller"]%>
Search" method="get" name="formsearch" id="search_form_project">
   <table border="0" cellpadding="0" cellspacing="0" class="tbl-form-search">
         <tr>
          <input type="hidden" value="" name="SearchAction" />
           <td style="padding-left: 8px;">
            <table   border="0" cellpadding="0" cellspacing="0" class="tbl-form-search" >
           
<tr class="city-location-subarea">
   <%
       if (ControllerName == "PropertyInternational" || ControllerName == "ProjectInternational")
       {
           %>
          <th>
            <b> Country</b>
            </th>
         <td>
            <select data-bind="options: availableCountry, 
                       optionsCaption:'All',
                       optionsText: 'Country_EN',
                       optionsValue: 'Country_ID'
                       " class="chzSF hide" id="vmCountrySF" name="Country">
            </select>
        </td>
    <script type="text/javascript">
    $(document).ready(function() {
    //Begin Data
    selectedcountry = '<%=(ViewData["Country"]!=null)?((ViewData["Country"].ToString()!="")?ViewData["Country"].ToString():""):""%>';
         
        System.Data.CountryModelSF = function() {
            var self = this;
            //Country
            self.availableCountry = ko.observableArray([]);
           
            
            //save
           
            ( function() {
                $.getJSON(BASE_URL + "Listings/Ajax/GetCountry", function(result) {
                    self.availableCountry(result.Data);
                   
                    $("#vmCountrySF").chosen({
                        allow_single_deselect: true
                    });
                    if (selectedcountry != "") {

                        $("#vmCountrySF").val(selectedcountry).trigger("liszt:updated");
                      }
                    $("#vmCountrySF").removeClass("hide");
                });
                })();


               
            };
        
        //Fill Data
        var vmCountrySF = new System.Data.CountryModelSF();
      
        ko.applyBindings(vmCountrySF, $("#vmCountrySF")[0]);

    });

</script>

       <%}
       else
       {  
    %>
    <td ><b>City/Zone</b></td>
    <td>
        <select data-bind="options: availableCity, 
                   optionsCaption:'All',
                   optionsText: 'CityName',
                   optionsValue: 'CityID',
                   value:selectedCity
                   " class="chzSF hide " id="vmCitySF" name="City"></select> 
    </td>
    <%} %>
     <td>
       <b> Property Type</b> </td>
            <td><select data-bind="options: availablePropertyType, 
                   optionsCaption:'All',
                   optionsText: 'Name',
                   optionsValue: 'PropertyType_ID'
                   " class="chzSF  hide" id="vmPropertyTypeSF" name="PropertyType" ></select> 
            <%--<b>Street Name</b> </td>
            <td><select data-bind="options: availableStreetName, 
                   optionsCaption:'All',
                   optionsText: 'StreetName1',
                   optionsValue: 'StreetName_ID'
                   " class=" chzSF hide" id="vmStreetNameSF" name="StreetName" ></select> --%></td>
                   
                   <td><b>Price Min</b></td>
                   <td>
                    <input type="text" name="PriceMin" style="width:80px;margin-top:3px;"  value='<%=(ViewData["PriceMin"] != null ? ((ViewData["PriceMin"].ToString()!="")?ViewData["PriceMin"].ToString():"") : "")%>'/>
                    </td>
                    <td>
                    <b>Price Max</b>
                    </td>
                    <td>
                    <input type="text" name="PriceMax"  value='<%=(ViewData["PriceMax"] != null ? ((ViewData["PriceMax"].ToString()!="")?ViewData["PriceMax"].ToString():"") : "")%>' style="width:80px;margin-top:3px;" />
                   </td>
                   <td>
                   <select name="PriceUnit" id="PriceUnit" style="width:68px">
                    <option value="RMB"  <%=(ViewData["PriceUnit"]!=null)?((ViewData["PriceUnit"].ToString()=="RMB")?"selected":""):""%>>RMB</option>
                    <option value="USD"  <%=(ViewData["PriceUnit"]!=null)?((ViewData["PriceUnit"].ToString()=="USD")?"selected":""):""%>>USD</option>
                   </select>
                   </td>
    </tr>
<tr class="tr-locationSF city-location-subarea" >
<%if (ControllerName == "PropertyInternational" || ControllerName == "ProjectInternational")
  {
           %> 
            <td>
        <b>City</b> 
    </td>
           <td><input type="text" name="CityInt" value='<%=(ViewData["CityInt"] != null ? ((ViewData["CityInt"].ToString()!="")?ViewData["CityInt"].ToString():"") : "")%>'  style="width:208px"></td>
       <%}
  else
  { %>
  <td><b> Location</b></td>
 <td>
        <select data-bind="options: availableLocation, 
                   optionsCaption:'All',
                   optionsText: 'LocationName',
                   optionsValue: 'LocationID',
                   value:selectedLocation
                   " class="chzSF  hide" id="vmLocationSF" name="Location">       </select> 
    </td>
    <%} %>
     <th><b>Property Classification </b> &nbsp; </th>
    <td>
        <select name="PropertyClss" class="chzSF" id="PropertyClss">
            <option value="">All</option>
             <option value="Strata" <%=(ViewData["PropertyClss"]!=null)?((ViewData["PropertyClss"].ToString()=="Strata")?"selected":""):""%>>Strata</option>
            <option value="Landed" <%=(ViewData["PropertyClss"]!=null)?((ViewData["PropertyClss"].ToString()=="Landed")?"selected":""):""%>>Landed</option>
           
        </select>
    </td>
    <td><b>Size Min</b></td>
                   <td>
                    <input type="text" name="SizeMin" value='<%=(ViewData["SizeMin"] != null ? ((ViewData["SizeMin"].ToString()!="")?ViewData["SizeMin"].ToString():"") : "")%>' style="width:80px;margin-top:3px;"/>
                    </td>
                    <td>
                    <b>Size Max</b> &nbsp;
                    </td>
                    <td>
                    <input type="text" name="SizeMax" value='<%=(ViewData["SizeMax"] != null ? ((ViewData["SizeMax"].ToString()!="")?ViewData["SizeMax"].ToString():"") : "")%>' style="width:80px;margin-top:3px;"/>
                   </td>
       <td>
       <select name="SizeUnit" id="SizeUnit" style="width:68px">
        <option value="Sqm"  <%=(ViewData["SizeUnit"]!=null)?((ViewData["SizeUnit"].ToString()=="Sqm")?"selected":""):""%>>Sqm</option>
        <option value="Sqft"  <%=(ViewData["SizeUnit"]!=null)?((ViewData["SizeUnit"].ToString()=="Sqft")?"selected":""):""%>>Sqft</option>
       </select>
       </td>
                   
    
</tr>
    <tr class="tr-subareaSF city-location-subarea" >
    <%if (ControllerName != "ProjectInternational" && ControllerName != "PropertyInternational")
      { %> 
  <td ><b> Subarea</b></td>
 <td>
       <select data-bind="options: availableSubrea, 
                   optionsCaption:'All',
                   optionsText: 'SubareaName',
                   optionsValue: 'Subarea_ID',
                   value:selectedSubarea
                   " class="chzSF  hide" id="vmSubareaSF" name="Subarea"></select> 
    </td>
    <%}
      else
      { %>
       
            
    <%} %>
    <td><b>Status</b></td>
    <td>
        <select name="Status" class="chzSF" id="chzStatus">
            <option value="">All</option>
            <option value="1" <%=(ViewData["Status"]!=null)?((ViewData["Status"].ToString()=="1")?"selected":""):""%>>Active</option>
            <option value="2" <%=(ViewData["Status"]!=null)?((ViewData["Status"].ToString()=="2")?"selected":""):""%>>Draft</option>
            <option value="3" <%=(ViewData["Status"]!=null)?((ViewData["Status"].ToString()=="3")?"selected":""):""%>>Delete</option>
        </select>
    </td>
     <td><b>Bedroom</b></td>
    <td>
    
<select  class="chzslc" style="width:95px" name="Bedroom">
<option value="">All</option>
<option value="Studio" <%=(ViewData["Bedroom"]!=null)?((ViewData["Bedroom"].ToString()=="Studio")?"selected":""):""%>>Studio</option>
<%  for (int i = 1; i < 10;i++ )
    {
        %>
        <option value="<%=i%>" <%=(ViewData["Bedroom"]!=null)?((ViewData["Bedroom"].ToString()==i.ToString())?"selected":""):""%>><%=i%></option>
        <%
    }%>
	<option value="10+">10+</option>						
					
 </select>
    </td>
    <td ><b>Bathroom</b></td>
    
    <td>
<select  class="chzslc" style="width:95px" name="Bathroom">
<option  value="">All</option>
<%  for (int i = 0; i < 10;i++ )
    {
        %>
        <option value="<%=i%>"  <%=(ViewData["Bathroom"]!=null)?((ViewData["Bathroom"].ToString()==i.ToString())?"selected":""):""%>><%=i%></option>
        <%
    }%>
	<option value="10+">10+</option>						
					
 </select>
    </td>
    
            </tr>
         
          
   

    <tr>
   
            <td><b>Tenure</b> </td>
            <td><input type="text" name="Tenure" value='<%=(ViewData["Tenure"] != null ? ((ViewData["Tenure"].ToString()!="")?ViewData["Tenure"].ToString():"") : "")%>'  style="width:208px"/></td>
    <td>
            <b>Keyword</b> </td>
            
            <td> <input type="text" name="Keyword" value='<%=(ViewData["Keyword"] != null ? ((ViewData["Keyword"].ToString()!="")?ViewData["Keyword"].ToString():"") : "")%>'  style="width:208px"/></td>
          <td>
            <b>Property For </b>
          </td>
          <td>
              <% if (ViewData["PropertyFor"] != null)
                 {%>
                <input type="Radio" name="PropertyFor" <%=(ViewData["PropertyFor"].ToString()=="Sale")?"checked":"" %>  value="Sale" /> <b>Sale</b>
              <input type="Radio" name="PropertyFor"  <%=(ViewData["PropertyFor"].ToString()=="Rent")?"checked":""%>  value="Rent"/> <b>Rent</b>
              <% }
                 else
                 { %>
               <input type="Radio" name="PropertyFor"   value="Sale" checked="checked"/> <b>Sale</b>
              <input type="Radio" name="PropertyFor"  value="Rent"/> <b>Rent</b>
              <% } %>
          </td>
    </tr>
            </table>
           </td>
        </tr>
        <tr>
          
            <td>
                <input type="submit" value="Search"  class="buttonsSF"/>
            </td>
        </tr>
        </table>
</form>
</div>
<style type="text/css">
.qtip
{
    max-width:800px !important;
}
.tbl-form-search
{
    font-family: 'HelveticaNeue', Arial, Helvetica, sans-serif;
    font-size:12px;
}
.tbl-form-search tr td
{
    padding-bottom:18px;
    padding-right:18px;
}
.chzSF
{
    width:218px;
}
.buttonsSF
{
    background-color: #FFFFFF;
    background-image: -moz-linear-gradient(center top , #FFFFFF 2%, #F0F0F0 2%, #DEDEDE 100%);
    border: 1px solid #969696;
    border-radius: 2px 2px 2px 2px;
    box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);
    color: #515151;
    cursor: pointer;
    display: block;
    float: right;
    font: bold 11px Tahoma;
    height: 2.65em;
    outline: 0 none;
    padding: 0 1em;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    white-space: nowrap;
    word-wrap: normal;
    margin-right: 8px;
}
.buttonsSF:hover
{
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    color: #aa0e0f;
    background-color: #fff;
    background-image: -moz-linear-gradient(top,  rgb(255,255,255) 2%, rgb(244,244,244) 2%, rgb(229,229,229) 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgb(255,255,255)), color-stop(2%,rgb(244,244,244)), color-stop(100%,rgb(229,229,229)));
    background-image: -webkit-linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%);
    background-image: -o-linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%);
    background-image: -ms-linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%);
    background-image: linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
    border-color: #aeaeae;
    box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
}
</style>
<script type="text/javascript">
    $(document).ready(function() {
        $("#chzStatus").chosen({
            allow_single_deselect: true
        });
        $(".chzslc").chosen({
            allow_single_deselect: true
        });
        $("#PropertyClss").chosen({
            allow_single_deselect: true
        });
        $("#PriceUnit").chosen({
            allow_single_deselect: true
        });
        $("#SizeUnit").chosen({
            allow_single_deselect: true
        });
        
        <% if (ControllerName != "PropertyInternational" && ControllerName != "ProjectInternational"  )
       { %>
        /**BEGIN**/
        cityselected ='<%=(ViewData["CityID"]!=null)?((ViewData["CityID"].ToString()!="")?ViewData["CityID"].ToString():""):""%>';
        locationselected = '<%=(ViewData["LocationID"]!=null)?((ViewData["LocationID"].ToString()!="")?ViewData["LocationID"].ToString():""):""%>';
        subareaselected = '<%=(ViewData["SubareaID"]!=null)?((ViewData["SubareaID"].ToString()!="")?ViewData["SubareaID"].ToString():""):""%>';
        var isfirst = 0;
        System.Data.CityLocationSubarea = function() {
            var self = this;
            //
            // Initially set to false so UI will show 'Loading...'
            self.initialized = ko.observable(false);

            self.availableCity = ko.observableArray([]);
            self.availableLocation = ko.observableArray([]);
            self.availableSubrea = ko.observableArray([]);
            self.selectedCity = ko.observable('');
            self.selectedLocation = ko.observable('');
            self.selectedSubarea = ko.observable('');
            //
            self.loadLocation = function(cityid) {
                $.getJSON(BASE_URL + "Listings/Ajax/GetLocation/" + cityid, function(result) {

                    self.availableLocation.removeAll();
                    self.availableLocation(result.Data);
                    // Removing the li containers that follow (if any)


                    if (self.availableLocation().length > 0) {

                        $("#vmLocationSF").chosen({
                            allow_single_deselect: true
                        });

                        if (locationselected != "") {

                            $("#vmLocationSF").val(locationselected).trigger("liszt:updated");
                            self.loadSubarea(locationselected);
                        } else {
                            $("#vmLocationSF").trigger("liszt:updated");
                        }

                        $("#vmLocationSF").removeClass("hide");
                        $(".tr-locationSF").removeClass("hide");
                    } else {

                        $("#vmLocationSF").chosen({
                            allow_single_deselect: true
                        });

                        $("#vmLocationSF").trigger("liszt:updated");
                        $("#vmLocationSF").addClass("hide");
                        $(".tr-locationSF").addClass("hide");
                    }
                });

            };
            //
            self.loadSubarea = function(id) {
                $.getJSON(BASE_URL + "Listings/Ajax/GetSubarea/" + id, function(result) {

                    self.availableSubrea.removeAll();
                    self.availableSubrea(result.Data);
                    // Removing the li containers that follow (if any)

                    var length = self.availableSubrea().length;

                    $("#vmSubareaSF").chosen({
                        allow_single_deselect: true
                    });
                    if (subareaselected != "") {

                        $("#vmSubareaSF").val(subareaselected).trigger("liszt:updated");
                    }
                    else {
                        $("#vmSubareaSF").trigger("liszt:updated");

                    }

                    if (length > 0) {

                        $("#vmSubareaSF").removeClass("hide");
                        $(".tr-subareaSF").removeClass("hide");
                    } else {
                        //$("#vmSubareaSF").addClass("hide");
                        //$(".tr-subareaSF").addClass("hide");
                        /* }
                        if(length == 0){    
                         
                        $("#vmSubareaSF").addClass("hide");
                        $(".tr-subareaSF").addClass("hide");
                        }
                        if(isfirst == 0 && length == 0){
                         
                        $("#vmSubareaSF").removeClass("hide");
                        $(".tr-subareaSF").removeClass("hide");
                        }else
                        {
                         
                        $("#vmSubareaSF").addClass("hide");
                        $(".tr-subareaSF").addClass("hide");
                        }*/

                    }
                });

            };
            //
            self.selectedCity.subscribe(function(newValue) {

                if (newValue) {
                    isfirst = 1;
                    self.loadLocation(newValue);
                    self.loadSubarea(0);

                } else {
                    //location 
                    self.availableLocation.removeAll();
                    $("#vmLocationSF").trigger("liszt:updated");
                    //subarea
                    if (isfirst != 1) isfirst = 0;

                    self.loadSubarea(0);


                }
            });
            //
            self.selectedLocation.subscribe(function(newValue) {
                if (newValue) {
                    isfirst = 1;
                    self.loadSubarea(newValue);

                } else {
                    if (isfirst != 1) isfirst = 0;
                    self.availableSubrea.removeAll();
                    $("#vmSubareaSF").trigger("liszt:updated");
                }
            });


            //Init City
            (function() {
                $.getJSON(BASE_URL + "Listings/Ajax/GetCity", function(result) {
                    self.availableCity(result.Data);

                    $("#vmCitySF").chosen({
                        allow_single_deselect: true
                    });
                    // For edit 
                    if (cityselected != "") {
                        $("#vmCitySF").val(cityselected).trigger("liszt:updated");
                        //location
                        self.loadLocation(cityselected);


                    } else {
                        $("#vmCitySF").removeClass("hide");
                        $("#vmLocationSF").chosen({
                            allow_single_deselect: true
                        });
                        $("#vmLocationSF").removeClass("hide");
                        //Load Subarea
                        $("#vmSubareaSF").chosen({
                            allow_single_deselect: true
                        });
                        $("#vmSubareaSF").removeClass("hide");


                    }


                });

            })();


        };

        var vmCitySFLocationSubarea = new System.Data.CityLocationSubarea();
        ko.applyBindings(vmCitySFLocationSubarea, $("#vmCitySF")[0]);
        ko.applyBindings(vmCitySFLocationSubarea, $("#vmLocationSF")[0]);
        ko.applyBindings(vmCitySFLocationSubarea, $("#vmSubareaSF")[0]);

       <%} %>
        /**END**/

        propertytypeselected = '<%=(ViewData["PropertyType"]!=null)?((ViewData["PropertyType"].ToString()!="")?ViewData["PropertyType"].ToString():""):""%>';
        System.Data.PropertyTypeModel = function() {
            var self = this;
            //
            self.availablePropertyType = ko.observableArray([]);
            self.selected = ko.observableArray([]);

            self.load = function() {
                $.getJSON(BASE_URL + "Listings/Ajax/GetPropertyType", function(result) {
                    self.availablePropertyType(result.Data);
                    $("#vmPropertyTypeSF").chosen({
                        allow_single_deselect: true
                    });

                    $("#vmPropertyTypeSF").removeClass("hide");
                    if (propertytypeselected != "") {
                        $("#vmPropertyTypeSF").val(propertytypeselected).trigger("liszt:updated");
                    }
                   
                });

            };
        }
        //Fill Data
        var vmPropertyType = new System.Data.PropertyTypeModel();
        vmPropertyType.load();
        ko.applyBindings(vmPropertyType, $("#vmPropertyTypeSF")[0]);
        //Begin Data
        /*
        System.Data.StreetNameModel = function() {
            var self = this;
            //

            self.availableStreetName = ko.observableArray([]);
            self.selected = ko.observableArray([]);

            self.loadStreetName = function() {
                $.getJSON(BASE_URL + "Listings/Ajax/GetStreetName", function(result) {
                    self.availableStreetName(result.Data);

                    $("#vmStreetNameSF").chosen({
                        allow_single_deselect: true
                    });

                    $("#vmStreetNameSF").removeClass("hide");
                });



            };
        }
        //Fill Data
        var vmStreetName = new System.Data.StreetNameModel();
        vmStreetName.loadStreetName();
        ko.applyBindings(vmStreetName, $("#vmStreetNameSF")[0]);*/
        
        
        
    });

</script>